<template>
  <div>
    <xy-table
      ref="xy-table"
      :columns="columns"
      :api="api"
      :param="param"
      :on-delete="removePayroll"
      :on-view="toView"
    >
      <template slot="addItem">
        <search-header :model="params" :on-search="onSearch">
          <template #operation="">
            <el-form-item class="col-1">
              <el-button @click="toApply" size="mini">
                <i class="el-icon-upload2"></i>
                {{ $language.local("资金代发") }}
              </el-button>
            </el-form-item>
          </template>
        </search-header>
      </template>
      <template #edit=""><span hidden></span></template>
      <template #delete="{ row }">
        <span hidden v-if="row.BusinesStatus === 2"></span>
      </template>
      <template #appendButton="{ row }">
        <el-button
          v-if="row.BusinesStatus === 2"
          type="text"
          size="mini"
          @click="toPayRefund(row)"
        >
          {{ $language.local("PayRefund") }}
        </el-button>
      </template>
    </xy-table>

    <el-dialog
      :title="$language.local(dialogTitle)"
      :visible.sync="refundDialogVisible"
      width="50%"
    >
      <el-form
        :model="formData"
        status-icon
        label-position="top"
        ref="formRef"
        :rules="$rules"
        class="grid-flex"
      >
        <template v-for="(value, key) in formData">
          <template v-if="key === 'MID'"></template>
          <template v-else-if="key === 'AttFileUrl'">
            <el-form-item
              class="upload-file"
              :key="key"
              :prop="key"
              :label="$language.local(key)"
            >
              <upload-file></upload-file>
            </el-form-item>
          </template>
          <el-form-item
            v-else
            :key="key"
            :prop="key"
            :label="$language.local(key)"
          >
            <xy-input
              v-if="key === 'refundReason'"
              v-model="formData[key]"
            ></xy-input>
            <xy-input v-else disabled v-model="formData[key]"></xy-input>
          </el-form-item>
        </template>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="reload">
          {{ $language.local("Cancel") }}
        </el-button>
        <el-button type="primary" @click="onSubmit('formRef')">
          {{ $language.local("Submit") }}
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="$language.local(dialogTitle)"
      :visible.sync="viewDialogVisible"
      width="62%"
    >
      <payroll-details :model="formData"></payroll-details>
    </el-dialog>
  </div>
</template>

<script>
import API from "../../plugins/api";
import PayrollDetails from "./PayrollDetails.vue";
export default {
  inject: ["reload"],
  name: "payroll",
  components: {
    "payroll-details": PayrollDetails,
  },
  data() {
    return {
      user: this.$store.getters.user,
      refundDialogVisible: false,
      param: null,
      ServiceID: 123,
      api: new API("/api/transaction/"),
      columns: {
        BatchNo: "",
        MerchantName: "淮北通财网络服务有限公司",
        ServiceProviderName: "湖南好捷科技有限公司",
        atime: "2021-03-26T22:12:03.303",
        TotalNum: 1,
        TotalAmount: 621077,
        BatchStatus: 6,
      },
      services: [],
      addForm: {
        MerchantCode: "000130",
        MerchantName: "淮北通财网络服务有限公司",
        ServiceProviderName: "湖南好捷科技有限公司",
        BatchNo: "BN21032622120236",
        BatchStatusName: "代付处理完成",
        atime: "2021-03-26T22:12:03.303",
        TotalNum: 1,
        TotalAmount: 621077,
        BatchSource: "API",
        // invoiceAmount: 0,
        // RechargeAmount: 0,
        // Id: 891,
        // MID: 130,
        // AuditStatus: 0,
        // PayStatus: 0,
        // PayChannelId: 0,
        // FilePath: null,
        // BatchOrderId: "XYHR2021032673442248177",
        // resJson: null,
        // ServiceProviderId: 4,
        // BatchStatus: 6,
        // invoiceApplyDate: "0001-01-01T00:00:00",
        // Reasons: null,
        // BusinesStatus: 2,
        // CheckTime: "0001-01-01T00:00:00",
        // BatchStt: null,
        // BatchSttName: null,
        // repayAmount: null,
        // repayFee: null,
        // completeTime: null,
      },
      params: {
        ServiceID: "",
        MID: "",
        BeginDate: "",
        EndDate: "",
      },
      form: {
        ServiceID: "",
        MID: "",
        BeginDate: "",
        EndDate: "",
        date: [],
      },
      formData: {
        MID: "",
        BeneficiaryName: "",
        ordrId: "",
        // CanceltrxId: "",
        refundAmount: "",
        refundReason: "",
        AttFileUrl: "",
      },
      dialogTitle: "退款",
      viewDialogVisible: false,
      Id: "",
    };
  },
  created() {
    this.form.date[0] = new Date(new Date() - 3600 * 1000 * 24 * 30);
    this.form.date[1] = new Date();
  },
  methods: {
    async onSubmit(formName) {
      console.log(this.$refs[formName]);
      console.log(this.uploadForm);
      await this.$refs[formName].validate();
      console.log(this.uploadForm);
      let response = await this.$http.post(
        "/api/transaction/BatchData",
        null,
        this.uploadForm
      );
      console.log(response);

      this.refundDialogVisible = false;
    },
    toApply() {
      this.$router.push("/apply");
    },
    async deleteItem(item) {
      console.log(item);
      let result = await this.$confirm(
        `${this.$language.local("确认删除吗")}？`,
        this.$language.local("提示"),
        {
          confirmButtonText: this.$language.local("确定"),
          cancelButtonText: this.$language.local("取消"),
          type: "warning",
        }
      ).catch((err) => err);

      if (result === "confirm") {
        console.log(item);
        let id = item["id"] || item["ID"] || item["Id"];
        await this.$http.delete(`${this.api.deleteById}/${id}`, {
          mid: item.MID,
        });

        this.reload();
      } else {
        this.$message.info("已取消");
      }
    },
    async toView(item) {
      console.log(item);
      // this.$router.push({
      //   path: "/review-details",
      //   query: {
      //     api: this.api.getModel,
      //     id: item.id || item.Id || item.ID,
      //   },
      // });
      this.dialogTitle = this.$language.local("View");
      let response = await this.$http.get(this.api.getModel + item.Id);
      console.dir(response);
      this.formData = response.data.Data;
      delete this.formData.BatchSttName;
      this.viewDialogVisible = true;
    },
    toPayRefund(item) {
      console.log(item);
      this.formData = {
        MID: item.MID,
        BeneficiaryName: item.MerchantName,
        ordrId: item.BatchNo,
        // CanceltrxId: "",
        refundAmount: item.TotalAmount,
        refundReason: "",
        AttFileUrl: "",
      };
      console.log(this.formData);
      this.refundDialogVisible = true;
      // let addFormKeys = {
      //   // MID: "",
      //   BeneficiaryName: "",
      //   ordrId: "",
      //   // CanceltrxId: "",
      //   refundAmount: "",
      //   refundReason: "",
      //   AttFileUrl: "",
      // };
    },
    async removePayroll(e) {
      let response = await this.$http.post(
        `/api/transaction/Cancel?TBID=${e.Id}`
      );
      console.log(response);
    },
    onSearch(e) {
      console.log(e);
      this.$refs["xy-table"].getData(e);
    },
    async toPay(row) {
      console.log(row);
      const response = await this.$http.get(`/api/transaction/GetRAStatus`, {
        MID: row.MID,
      });
      console.log(response);
      if (response.data.Data.RAStatus === "0") {
        const response = await this.$http.post(
          `/api/transaction/ToPay?TBID=${row.Id}`
        );
        console.log(response);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.label {
  height: 100%;
}
.line {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
